<template>
	<uni-popup ref="confirmDialogRef" type="dialog" @change="change">
		<view class="rounded-l bg-white overflow-hidden" :style="{ width: dialogWidth + 'px' }">
			<view v-if="title" class="px-4-4 pt-6-2 text-center">
				<text class="text-title	font-semibold color-main">{{ title }}</text>
			</view>
			<view class="px-4-4 pb-6-2" :class="[isAlert || isConfirm ? 'text-center' : '', title ? 'pt-3-1' : 'pt-6-2']">
				<slot v-if="isAlert || isConfirm">
					<text class="text-title color-secondary">{{ content }}</text>
				</slot>
				<view v-else class="py-1-1 border-b b-color-1 color-main">
					<input
						type="text"
						class="text-title"
						:placeholder="placeholder"
						v-model="promptText"
						:type="inputType || 'text'"
						:placeholder-style="'color:' + SlStyle.disableColor"
						@change="handleChange"
					/>
				</view>
			</view>
			<view class="border-t b-color-3 row-center items-stretch text-center">
				<view
					v-if="isConfirm || isPrompt"
					class="flex-1 px-1-3 py-3-1"
					hover-class="bg-color-1"
					hover-start-time="0"
					hover-stay-time="20"
					@click="close"
				>
					<text :class="['text-title color-secondary', cancelTextCls]" :style="cancelTextStyle">{{ cancelText }}</text>
				</view>
				<view v-if="isConfirm || isPrompt" class="w-min bg-b-color-3"></view>
				<view
					class="flex-1 px-1-3 py-3-1"
					hover-class="bg-color-1"
					hover-start-time="0"
					hover-stay-time="20"
					@click="confirm"
				>
					<text :class="['text-title color-primary', okTextCls]" :style="okTextStyle">{{ okText }}</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { ref, nextTick, getCurrentInstance, onMounted } from 'vue';
import SlStyle from '../../../style/style.js';

//宽度，默认是rpx单位，如果换算成px后大于这个值的话，则取这个值
const DIALOG_WIDTH = 640;

export default {
	props: {
		//三种样式 confirm alert prompt
		type: {
			type: String,
			default: 'confirm',
		},
		inputType: String,
	},
	setup(props) {
		const confirmDialogRef = ref();
		const isConfirm = props.type === 'confirm';
		const isAlert = props.type === 'alert';
		const isPrompt = props.type === 'prompt';
		function change(e) {
			if (!e.show) {
				promptText.value = '';
			}
		}
		//dialogWidth
		let width = uni.upx2px(DIALOG_WIDTH);
		if (width > DIALOG_WIDTH) {
			width = DIALOG_WIDTH;
		}
		const dialogWidth = ref(width);
		//title content
		const title = ref('提示');
		const content = ref('');
		const placeholder = ref('请输入');
		const promptText = ref('');
		//btn text
		const cancelText = ref('取消');
		const cancelTextCls = ref('');
		const cancelTextStyle = ref('');
		const okText = ref('确定');
		const okTextCls = ref('');
		const okTextStyle = ref('');
		//btn handler
		let doClose = null;
		let doConfirm = null;
		function close(e) {
			doClose && doClose(e);
			confirmDialogRef.value.close();
		}
		function confirm(e) {
			if (doConfirm) {
				let re;
				if (isPrompt) {
					re = doConfirm(promptText.value, e);
				} else {
					re = doConfirm(e);
				}
				if (re !== false) {
					confirmDialogRef.value.close();
				}
			}
		}
		function handleChange(e){
			promptText.value = e.detail.value;
		}
		//expose
		function setOptions(options) {
			options = options || {};
			content.value = options.content;
			doClose = options.cancel;
			doConfirm = options.ok;
			title.value = options.title || '';
			options.cancelText && (cancelText.value = options.cancelText);
			options.cancelTextCls && (cancelTextCls.value = options.cancelTextCls);
			options.cancelTextStyle && (cancelTextStyle.value = options.cancelTextStyle);
			options.okText && (okText.value = options.okText);
			options.okTextCls && (okTextCls.value = options.okTextCls);
			options.okTextStyle && (okTextStyle.value = options.okTextStyle);
			options.placeholder && (placeholder.value = options.placeholder);
			options.value && (promptText.value = options.value);
			confirmDialogRef.value.open();
		}
		return {
			change,
			title,
			content,
			promptText,
			placeholder,
			close,
			confirm,
			dialogWidth,
			cancelText,
			cancelTextCls,
			cancelTextStyle,
			okText,
			okTextCls,
			okTextStyle,
			isConfirm,
			isAlert,
			isPrompt,
			setOptions,
			SlStyle,
			confirmDialogRef,
			handleChange,
		};
	},
};
</script>

<style></style>
